<!--
 * @Description: file content
-->
<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column  label="用户名" width="180" prop="username">
      </el-table-column>
      <el-table-column label="角色信息">
        <template #default="scope">
          <span class="center">{{ ROLE[scope.row.role] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="头像">
        <template #default="scope">
          <div class="center" v-if="scope.row.avatar">
            <el-avatar :src="baseUrl + scope.row.avatar" :size="50" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="性别">
        <template #default="scope">
          <span class="center">{{ SEX[scope.row.sex] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-popconfirm
            title="确定删除吗?"
            confirm-button-text="确定"
            cancel-button-text="取消"
            @confirm="handleDelete(scope.$index, scope.row)"
          >
            <template #reference>
              <el-button size="small" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogTableVisible" title="编辑用户信息">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select v-model="ruleForm.role">
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in roleOption"
              :key="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="ruleForm.sex">
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in sexOption"
              :key="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogCancel">取消</el-button>
          <el-button type="primary" @click="dialogOk"> 修改 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted, ref, reactive } from 'vue';
import { baseUrl, ROLE, SEX } from '@public/index';

const roleOption = [
  { label: '管理员', value: 1 },
  { label: '编辑', value: 2 },
];
const sexOption = [
  { label: '女', value: 1 },
  { label: '男', value: 2 },
  { label: '保密', value: 0 },
];
const tableData = ref([]);
const dialogTableVisible = ref(false);
const ruleFormRef = ref();
const ruleForm = reactive({
  username: '',
  avatar: '',
  role: 2, //1管理员2编辑
  file: null, // 上传的原生文件对象
  sex: 0,
});
const rules = reactive({
  username: [{ required: true, message: '请输入名字', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  role: [{ required: true, message: '请选择角色', trigger: 'change' }],
  avatar: [{ required: true, message: '请选择头像', trigger: 'change' }],
});
const getData = async () => {
  const res = await axios.get('/adminApi/user/list');
  if (res.code === 200) {
    tableData.value = res.data;
  }
};
const handleEdit = async (row) => {
  const res = await axios.get(`/adminApi/user/list/${row._id}`);
  dialogTableVisible.value = true;
  Object.assign(ruleForm, res.data[0]);
};
const handleDelete = async (index, row) => {
  axios.delete(`/adminApi/user/list/${row._id}`).then((res) => {
    if (res.code === 200) {
      ElMessage({
        message: res.msg,
        type: 'success',
      });
      getData();
    }
  });
};
const dialogCancel = () => {
  dialogTableVisible.value = false;
};
const dialogOk = () => {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      axios.put(`/adminApi/user/list/${ruleForm._id}`, ruleForm).then((res) => {
        if (res.code === 200) {
          ElMessage.success(res.msg);
          dialogTableVisible.value = false;
          getData();
        }
      });
    }
  });
};
onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped>
.center {
  display: flex;
  align-items: center;
}
</style>
